<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <!-- 内标签 -->
    <div class="intitle">
      <el-table :data="kong" class="tableintitle">
        <el-table-column
          v-for="(item, index) in intitle"
          :key="index"
          :prop="item.prop"
          :label="item.name"
          :width="item.width"
          :min-width="item.minwidth"
        />
      </el-table>
      <!-- <span v-for="(item, index) in intitle" :key="index">
        <div class="grid-content bg-purple">{{ item.name }}</div>
      </span> -->
    </div>
    <!-- 循环体 -->
    <div class="circulation">
      <vue-seamless-scroll
        :key="tableData.length"
        :data="tableData"
        class="seamless-warp"
        :class-option="classOption"
      >
        <!-- <template slot-scope="scope"> -->
        <el-table
          :data="tableData"
          :cell-style="tableRowStyle"
          class="chartqwe"
          highlight-current-row

          @current-change="handleCurrentChange"
        >
          <el-table-column
            v-for="(item, index) in list"
            :key="index"
            :prop="item.prop"
            :code="item.fieldCode"
            :width="item.width"
            :min-width="item.minwidth"
          />
        </el-table>
        <!-- </template> -->
      </vue-seamless-scroll>
    </div>
  </el-card>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll"
export default {
  name: "Rolltable",
  components: {
    vueSeamlessScroll
  },
  props: {
    title: {
      type: String,
      default: "title"
    },
    // 内标签（死数据，就是list。name抽离，防止内标题页滚动,aaa只展示）
    intitle: {
      type: Array,
      default: function() {
        return [
          { name: "aaa", width: 180 },
          { name: "bbb", width: 200 },
          // { name: "ccc", width: 100 },
          { name: "ddd" }
        ]
      }
    },
    // 循环表格列数(数据交给intitle，list只绑intitle和tab直接进行prop的绑定，没有其他作用)
    list: {
      type: Array,
      default: function() {
        return [
          { prop: "name", width: 100, title: "", fieldCode: "" },
          { prop: "title", width: 270, title: "", fieldCode: "" },
          { prop: "date", width: 100, title: "", fieldCode: "" }
        ]
      }
    },
    // 循环表格内容（数据）
    tableData: {
      type: Array,
      default: function() {
        return [
          {
            name: "第1个",
            title: "无缝滚动第一行无缝滚动第一行",
            date: "2017-12-16"
          },
          {
            name: "第2个",
            title: "无缝滚动第二行无缝滚动第二行",
            date: "2017-12-16"
          },
          {
            name: "第3个",
            title: "无缝滚动第三行无缝滚动第三行",
            date: "2017-12-16"
          },
          {
            name: "第4个",
            title: "无缝滚动第四行无缝滚动第四行",
            date: "2017-12-16"
          },
          {
            name: "第5个",
            title: "无缝滚动第五行无缝滚动第五行",
            date: "2017-12-16"
          },
          {
            name: "第6个",
            title: "无缝滚动第六行无缝滚动第六行",
            date: "2017-12-16"
          },
          {
            name: "第7个",
            title: "无缝滚动第七行无缝滚动第七行",
            date: "2017-12-16"
          },
          {
            name: "第8个",
            title: "无缝滚动第八行无缝滚动第八行",
            date: "2017-12-16"
          },
          {
            name: "第9个",
            title: "无缝滚动第九行无缝滚动第九行",
            date: "2017-12-16"
          }
        ]
      }
    }
  },
  data() {
    return {
      val: "",
      kong: []
    }
  },

  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: this.tableData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  created() {
  },
  methods: {
    handleCurrentChange(value) {
    },
    // 设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return "font-size: 12px!important;"
      // text-align:center;
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep .el-card__header {
//   margin: auto;
// }
::v-deep .el-card__body {
  padding-top: 0px!important;
}
ul {
  padding: 0px;
}
.seamless-warp {
  height: 100%;
  overflow: hidden!important;
}
::v-deep.circulation {
  .el-table__header-wrapper {
    display: none;
  }
  .el-table__body-wrapper {
    overflow: hidden!important;
  }
  .is-scrolling-left {
    overflow: hidden!important;
  }
}
</style>

// <style lang="scss">
.tableintitle {
  color: white;
  .el-table__body-wrapper {
    display: none !important;
  }
  // 修改表格最底部颜色和高度
  ::v-deep .el-table::before {
    border-bottom: 0px;
  }
}
// </style>
